import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Tabs from '@/components/Tabs/Tabs1';
import TabPane from '@/components/Tabs/TabPane';

export default class TabView extends Component {

  constructor() {
    super();
    this.state = {
      activeIndex: 2,
    }
  }

  onSelectChange(event) {
    const val = parseInt(event.target.value, 10);
    this.setState({
      activeIndex: val
    });
  }

  render() {
    const { activeIndex } = this.state;
    return (
      <div>
        tabs:
        <select
          value={activeIndex}
          onChange={event => this.onSelectChange(event)}
        >
          <option
            value={1}
          >
            tab1
          </option>
          <option
            value={2}
          >
            tab2
          </option>
        </select>
        <Link to="tabs1">Tabs1</Link>
        <Link to="tabs2">Tabs2</Link>
        <Tabs
          prefixClass="tabs"
          activeIndex={activeIndex}
          defaultIndex={activeIndex}
          onChange={(index) => this.setState({
            activeIndex: index,
          })}
        >
          <TabPane
            index={1}
            tab="Tab 1"
          >
            Tab 1
          </TabPane>
          <TabPane
            index={2}
            tab="Tab 2"
          >
            Tab 2
          </TabPane>
        </Tabs>
      </div>

    )
  }
}
